<?php

use app\models\Audio;
use yii\helpers\Html;
use yii\helpers\Url;

/**
 * @var $content string
 * @var yii\web\View $this
 * @var Audio[] $audios 这里声明一下，说传递到这里有这么一个变量，名字叫做$audios，类型是Audio的数组
 */

$this->title = '矿大FM';

?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <base href="/">
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>

    <!--    引入字体图表需要的css-->
    <link rel="stylesheet" href="/font-awesome-4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css">

    <script src="js/lib/jquery/jquery.min.js"></script>
    <script src="js/lib/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<?php $this->beginBody() ?>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <!--        col-xs-N 是bootcss的一种布局，表示占用多少宽度，父节点的宽度认为是12，我这里就是363的分，又改成了282分-->
        <div class="header-bar-nav col-xs-2">
            <a href="<?=Url::to(['/audio/label'])?>">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </a>
        </div>
        <div class="header-bar-title col-xs-8">
            <a class="" href="#">
            <!--  alt是用于图片加载不出来的时候写的字，也用于读屏软件-->
                <img src="images/title.png" alt="矿大fm">
            </a>
        </div>
        <div class="header-bar-user col-xs-2">
            <a href="<?=Url::to(['/user/index'])?>">
                <i class="fa fa-user" aria-hidden="true"></i>
            </a>
        </div>

    </div>
</nav>

<div class="index container-fluid">
    <!--   container是一个类，其中的内容可以用刚刚的那种分法 -->
    <!--    这里是主题内容html些的地方-->
    <div class="card-list col-xs-12">
        <?php foreach($audios as $audio) { ?>
            <!-- 对audios的每一个元素进行循环 -->
            <div class="card container">
                <div class="col-xs-12 img">
                    <!-- 注意到没有，phpstorm 会有代码提示的，这就是前面好好的声明的作用 -->
                    <!-- 虽然不声明也能运行，但是会没有代码提示 -->

                    <a href="<?=Url::to(['/audio', 'id'=>$audio->id])?>">
                        <img src="<?=$audio->audio_pic?>-audio" alt="">
                    </a>
                    <!--<img src="images/app.jpg" alt="">-->
                    <!--    TODO 这里需要加上超链接，标题也要 -->
                </div>
                <!-- 看到没，提示没有了，这就得靠记忆来打，很难的 。有提示就容易很多-->
                <h2 class="col-xs-9">
                    <a href="<?=Url::to(['/audio', 'id'=>$audio->id])?>"><?=$audio->title?></a>
                </h2>
                <div class="col-xs-3 favorite">
                    <i class="fa fa-heart" aria-hidden="true"></i>
                    <span><?=$audio->praise_num?></span>
                </div>
                <p class="col-xs-12 desc">
                    <!-- Model 最大的好处就是可以用访问对象的方式获取数据库中关联的内容 -->
                    <?=$audio->description?>
                    <!-- “->labels”,就相当于，调用audio的getLabels方法。 -->
                    <?php foreach ($audio->labels as $label) { ?>
                        #<?=$label->name?>#
                    <?php } ?>
                </p>
                <a class="col-xs-12 more" href="<?=Url::to(['/audio', 'id'=>$audio->id])?>">查看详情 &gt;</a>
            </div>
        <?php } ?>
    </div>
</div>
<div style="display: none;"><script src="http://s11.cnzz.com/z_stat.php?id=1261300538&web_id=1261300538" language="JavaScript"></script></div>

<?php //$this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
